<template>
    <div>
        <el-row><el-button @click="calculate">保存水印位置</el-button> </el-row>
        <div style="display: flex;background-color: aqua;">
            <div class="pdf-img-watermark">
                <pdf :src="pdfSrc" style="width:300px; height: auto; border:1px solid red; position: relative;"
                    @error="handlePdfError">
                </pdf>
                <p v-if="pdfError">PDF 文件加载失败，请稍后重试。</p>
                <el-image class="aaaa" :src="imgwaterUrl" @mousedown="startDrag"
                    :style="{ left: dragX + 'px', top: dragY + 'px' }"></el-image>
            </div>

        </div>
    </div>

</template>

<script>
import pdf from 'vue-pdf';
import { updateWatermark } from "@/api/system/config";
import { queryPdfParam } from '@/api/tagManage/tag.js'
export default {
    components: { pdf },
    data() {
        return {
            pdfSrc: "/pdfTemplate.pdf",
            pdfError: false,
            isDragging: false,
            startX: 0,
            startY: 0,
            dragX: 0,
            dragY: 0,
            imgwaterUrl: ""
        };
    },
    mounted() {
        this.queryPdfParamData()
    },
    methods: {
        // 获取水印信息
        queryPdfParamData() {
            queryPdfParam().then(response => {
                if (response.code === 200) {
                    if (response.data.imgWatermark && response.data.imgWatermark !== '') {
                        this.imgwaterUrl = response.data.imgWatermark
                    } else {
                        this.$message.info("请先上传图片水印")
                    }


                } else {
                    this.$message.info("请先上传图片水印")
                }
            });
        },
        calculate() {
            // 获取父容器元素
            const parent = this.$el.querySelector('.pdf-img-watermark');
            // 获取 .aaaa 元素
            // const element = this.$el.querySelector('.aaaa');

            // 获取父容器的边界信息
            const parentRect = parent.getBoundingClientRect();
            // 获取 .aaaa 元素的尺寸信息
            // const elementRect = element.getBoundingClientRect();

            // 计算水平和垂直方向的比例
            const horizontalRatio = (this.dragX / parentRect.width) * 100;
            const verticalRatio = (this.dragY / parentRect.height) * 100;

            console.log(`水平位置比例: ${horizontalRatio.toFixed(2)}%`);
            console.log(`垂直位置比例: ${verticalRatio.toFixed(2)}%`);
            let params = {
                configKey: 'imgWatermarkPos',
                configName: "图片水印位置",
                configType: "Y",
                remark: "图片水印相对于pdf页面的百分比位置",
                configValue: `${horizontalRatio.toFixed(2)}%` + ',' + `${verticalRatio.toFixed(2)}%`
            }
            updateWatermark(params).then(response => {
                if (response.code == 200) {
                    this.$message.success(response.msg);
                }
            });
        },
        handlePdfError(error) {
            console.error('PDF 加载错误:', error);
            this.pdfError = true;
        },
        startDrag(event) {
            this.isDragging = true;
            this.startX = event.clientX;
            this.startY = event.clientY;
            document.addEventListener('mousemove', this.onDrag);
            document.addEventListener('mouseup', this.stopDrag);
        },
        onDrag(event) {
            if (this.isDragging) {
                const dx = event.clientX - this.startX;
                const dy = event.clientY - this.startY;
                this.dragX += dx;
                this.dragY += dy;
                this.startX = event.clientX;
                this.startY = event.clientY;

                // 获取父容器元素
                const parent = this.$el.querySelector('.pdf-img-watermark');
                // 获取 .aaaa 元素
                const element = this.$el.querySelector('.aaaa');

                // 获取父容器的边界信息
                const parentRect = parent.getBoundingClientRect();
                // 获取 .aaaa 元素的尺寸信息
                const elementRect = element.getBoundingClientRect();

                // 边界检查
                if (this.dragX < 0) {
                    this.dragX = 0;
                }
                if (this.dragY < 0) {
                    this.dragY = 0;
                }
                if (this.dragX + elementRect.width > parentRect.width) {
                    this.dragX = parentRect.width - elementRect.width;
                }
                if (this.dragY + elementRect.height > parentRect.height) {
                    this.dragY = parentRect.height - elementRect.height;
                }
            }
        },
        stopDrag() {
            this.isDragging = false;
            document.removeEventListener('mousemove', this.onDrag);
            document.removeEventListener('mouseup', this.stopDrag);
        }
    }
};
</script>

<style>
.pdf-img-watermark {
    background-color: aqua;
    position: relative;
    display: flex;
}

.aaaa {
    width: 50px;
    height: 50px;
    background-color: brown;
    position: absolute;
    cursor: move;
}
</style>